<template>
  <div>
    <h1>FindHouse</h1>
    <ul style="list-style: none;">
      <li v-for="v of houses" :key="v.houseCode" style="border: 1px solid red; margin-bottom: 5px; border-radius: 5px; padding: 5px; cursor: pointer;" @click="goDetail(v.houseCode)">{{ v }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
// 1. 一上来就发请求获取房屋列表数据（created）
// 2. 将响应数据设置到 data 上
// 3. 将 data 渲染到 template 中
export default {
  name: 'FindHousePage',
  data() {
    return {
      houses: [] // 房屋列表
    }
  },
  async created() {
    const res = await axios({
      method: 'GET',
      url: 'http://www.xiaoshuaipeng.com:8080/houses',
      params: {
        cityId: 'AREA|88cff55c-aaa4-e2e0'
      }
    })

    this.houses = res.data.body.list
  },
  methods: {
    goDetail(houseCode) {
      // 如何用JS跳转路由？ this.$router.push

      // 用路径方式 + 路径参数 的形式
      // this.$router.push('/detail/' + houseCode)
      // this.$router.push(`/detail/${houseCode}`)
      // this.$router.push({ path: '/detail/' + houseCode })
      // this.$router.push({ path: `/detail/${houseCode}` })
      // 这个 params 中的参数名称，是根据路由配置来的
      // 下面这种方式不行
      // this.$router.push({ path: '/detail', params: { id: houseCode } })

      // 用路径方式 + 查询参数 的形式
      // this.$router.push('/detail?id=' + houseCode)
      // this.$router.push(`/detail?id=${houseCode}`)
      // this.$router.push({ path: '/detail?id=' + houseCode })
      // this.$router.push({ path: `/detail?id=${houseCode}` })
      // this.$router.push({ path: '/detail', query: { id: houseCode } })

      // 用name方式 + 路径参数
      // this.$router.push({ name: '', params: {  } })
      // 用name方式 + 查询参数
      // this.$router.push({ name: '', query: {  } })

      this.$router.push({ name: 'HouseDetailPage', params: { id: houseCode } })

    }
  }
}
</script>

<style>

</style>